<template>
  <div class="safe-containner">
    <el-row>
      <el-col :span="24">
        <div class="outMore">
          <div class="dataTitle">
            配件更换记录
          </div>
        </div>
        <div class="safeSearch">
          <div class="outMost">
            <el-form :inline="true" :model="replaceBody">
              <el-form-item class="handItem" label="出厂编号:">
                <el-input class="handInput" v-model="replaceBody.data.condition.equip_cid"></el-input>
              </el-form-item>
              <el-form-item class="handItem" label="设备名称:">
                <el-input class="handInput" v-model="replaceBody.data.condition.equip_name"></el-input>
              </el-form-item>
              <el-form-item class="handItem" label="机构:">
                <el-select class="handInput" v-model="replaceBody.data.condition.fittings_type" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="handItem" label="配件名称:">
                <el-input class="handInput" v-model="replaceBody.data.condition.fittings_name"></el-input>
              </el-form-item>
              <el-form-item class="handItem" label="完成时间段:">
                <el-date-picker
                  v-model="timeNeed"
                  type="datetimerange"
                  range-separator="至"
                  class="dateInput"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="handItem">
                <el-button type="primary" @click="getReplaceList">查询</el-button>
              </el-form-item>
              <el-form-item class="handItem">
                <el-button class="clear" type="primary" @click="returnReplace">重置</el-button>
              </el-form-item>
              <el-form-item class="handItem" style="float: right">
                <el-button class="indieWidth" type="primary" @click="addReplace">
                  <img :src="addReplaceImg"/>新增记录
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="safeTableList">
          <el-dialog
            title="提示"
            :visible.sync="dialogDisable"
            width="540px"
            class="safeDisableDialog"
            style="margin-top: 20vh;">
            <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
              <img :src="disableIcon"/>
            </div>
            <span>确认禁用此策略</span>
            <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogDisable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="disableWork()">确 定</el-button>
        </span>
          </el-dialog>
          <el-dialog
            title="提示"
            :visible.sync="dialogEnable"
            width="540px"
            class="safeDisableDialog"
            style="margin-top: 20vh;">
            <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
              <img :src="enableIcon"/>
            </div>
            <span>确认启用此策略</span>
            <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogEnable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="enableWork()">确 定</el-button>
        </span>
          </el-dialog>
          <el-table
            :data="replaceList"
            border
            stripe border fit highlight-current-row
            height="745"
            :header-cell-style="{background:'#D8DEE8',height: '20px',padding:'5px 0px'}">
            <el-table-column
              prop="index"
              align="center"
              label="序号"
              width="60px"
            >
            </el-table-column>
            <el-table-column
              v-for="(column, index) in cols"
              :prop="column.prop"
              :label="column.label"
              :key="index"
              :width="column.width"
              :sortable="column.sortable"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              width="80px"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status === '已完成' ? 'primary' : 'success'"
                  disable-transitions>{{scope.row.status}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="操作"
              width="120px"
            >
              <template slot-scope="scope">
                <el-button class="tableIcon" title="查看" @click="replaceLookWeb(scope.row)" type="text" size="small">
                  <img :src="viewIcon"/>
                </el-button>
                <el-button v-if="scope.row.status === '未完成'" class="tableIcon" title="编辑" @click="replaceEditWeb(scope.row)" type="text" size="small">
                  <img :src="update"/>
                </el-button>
                <el-button v-if="scope.row.status === '未完成'" class="complete" title="完成" @click="replaceFinishWeb(scope.row)" type="text" size="small">
                 <span>完成</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container footerPage">
            <el-pagination
              @size-change="safeSizeChange"
              @current-change="safeCurrentChange"
              :current-page="ListQuery.page"
              :page-sizes="[5, 10, 20]"
              :page-size="ListQuery.limit"
              background layout="total, sizes, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import deleteDialog from './components/delete'

  import enable from '@/assets/mSiteAdmin/enable.png'
  import disable from '@/assets/mSiteAdmin/disable.png'
  import deletes from '@/assets/mSiteAdmin/delete.png'
  import remove from '@/assets/mSiteAdmin/remove.png'
  import update from '@/assets/mSiteAdmin/update.png'
  import viewIcon from '@/assets/mSiteAdmin/viewIcon.png'
  import disableIcon from '@/assets/mSiteAdmin/disable-icon.png'
  import enableIcon from '@/assets/mSiteAdmin/enable-icon.png'
  import addReplaceImg from '@/assets/mSiteAdmin/add.png'
  import axios from 'axios'
  export default {
    name: 'safeTime',
    components: { deleteDialog },
    data() {
      return {
        timeNeed: [],
        dialogDisable: false,
        dialogEnable: false,
        testNumber: this.routerNeed,
        options: [],
        deleteid: [],
        deleteids: [],
        value4: '',
        count: 1,
        cols: [
          { prop: 'record_id', label: '记录编号', width: '150px' },
          { prop: 'equip_cid', label: '出厂编号', width: '150px' },
          { prop: 'equip_name', label: '设备名称', width: '150px' },
          { prop: 'fittings_type_label', label: '机构', width: '200px' },
          { prop: 'fittings_name', label: '配件名称', width: '200px' },
          { prop: 'update_reason', label: '更换原因' },
          { prop: 'finish_time', label: '完成时间', width: '200px' }
        ],
        safeTimeNeedShow: [],
        safeTimeShow: [],
        equipsShow: [],
        total: 0,
        ListQuery: {
          page: 2,
          limit: 10,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        enable,
        disable,
        deletes,
        remove,
        update,
        viewIcon,
        disableIcon,
        enableIcon,
        addReplaceImg,
        findInput: '',
        formLabelWidth: '101px',
        formLabelWidth2: '50px',
        replaceList: [],
        needSafeName: '',
        //  配件更换记录
        replaceBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'update_log_get_condition',
          data: {
            condition: {
              equip_cid: '',
              equip_name: '',
              fittings_type: '',
              fittings_id: '',
              fittings_name: '',
              record_id: '',
              record_ids: [],
              status: '',
              begin_time: '',
              end_time: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        getTypeData: {
          access_token: localStorage.getItem('access_token'),
          type: 'fittings_get_basicdata'
        },
        // 删除安全时段
        deleteSiteBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'del_safetytime',
          pid: localStorage.getItem('num'),
          ids: ''
        },
        // 查看安全时段
        lookSiteBody: {
          access_token: 'access_tokenxxxxxxxx',
          type: 'get_safetytime_byid',
          pid: localStorage.getItem('num'),
          id: 5
        },
        // 启用安全时段
        safeEnable: {
          access_token: 'access_tokenxxxxxxxx',
          type: 'safetytime_enable',
          pid: localStorage.getItem('num'),
          ids: []
        },
        // 禁用安全时段
        safeDisable: {
          access_token: 'access_tokenxxxxxxxx',
          type: 'safetytime_disable',
          pid: localStorage.getItem('num'),
          ids: []
        }
      }
    },
    mounted() {
      this.getTypeWork()
      this.getReplaceList()
    },
    methods: {
      toJSON() {
      },
      getTypeWork() {
        axios.post('/fittings', this.getTypeData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.options = res.data.fittings_type
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      returnReplace() {
        this.replaceBody.data.condition.equip_cid = ''
        this.replaceBody.data.condition.equip_name = ''
        this.replaceBody.data.condition.fittings_type = ''
        this.replaceBody.data.condition.fittings_name = ''
        this.replaceBody.data.condition.begin_time = ''
        this.replaceBody.data.condition.end_time = ''
        this.timeNeed = []
        this.getReplaceList()
      },
      // 配件更换记录
      getReplaceList() {
        if (this.timeNeed) {
          this.replaceBody.data.condition.begin_time = this.timeNeed[0]
          this.replaceBody.data.condition.end_time = this.timeNeed[1]
        }
        axios.post('/fittings', this.replaceBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.replaceList = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          for (let a = 0; a < res.data.data.items.length; a++) {
            this.replaceList[a].index = (a + 1) + (res.data.data.page.page_number - 1) * res.data.data.page.page_size
          }
          for (let b = 0; b < this.replaceList.length; b++) {
            if (this.replaceList[b].status === 0) {
              this.replaceList[b].status = '未完成'
            } else {
              this.replaceList[b].status = '已完成'
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      safeCurrentChange(val) {
        this.replaceBody.data.page.page_number = (val) + ''
        this.getReplaceList()
      },
      // 每页显示多少条
      safeSizeChange(pageSize) {
        //  this.replaceBody.data.page.page_number = '1'
        this.replaceBody.data.page.page_size = (pageSize) + ''
        this.getReplaceList()
      },
      addReplace() {
        this.$router.push({
          path: '/monitor/components/recordsAdd'
        })
      },
      replaceLookWeb(row) {
        console.log(row)
        var looknumber = row.record_id
        this.$router.push({
          path: '/monitor/components/recordsLook',
          query: {
            id: looknumber
          }
        })
      },
      replaceEditWeb(row) {
        console.log(row)
        var looknumber = row.record_id
        this.$router.push({
          path: '/monitor/components/replaceEdit',
          query: {
            id: looknumber
          }
        })
      },
      replaceFinishWeb(row) {
        console.log(row)
        var looknumber = row.record_id
        this.$router.push({
          path: '/monitor/components/replaceFinish',
          query: {
            id: looknumber
          }
        })
      },
      // 删除弹框
      deleteDialog(index, row) {
        this.deleteid.push(row.id)
        this.$confirm('确认删除策略？', '提示', {
          customClass: 'deleteDialog',
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.onlyDelete()
        }).catch(() => {
        })
      },
      // 单个删除操作
      onlyDelete() {
        this.deleteSiteBody.ids = this.deleteid
        axios.post('/safetytime', this.deleteSiteBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.deleteid = []
          this.deleteSiteBody.ids = ''
          this.replaceBody.data.page.page_number = '1'
          this.getReplaceList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 启用
      showEnable(index, row) {
        this.dialogEnable = true
        this.safeEnable.ids = []
        this.safeEnable.ids.push(row.id)
      },
      enableWork() {
        axios.post('/safetytime', this.safeEnable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogEnable = false
          this.safeEnable.ids = []
          this.getReplaceList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 禁用
      showDisable(index, row) {
        this.dialogDisable = true
        this.safeDisable.ids = []
        this.safeDisable.ids.push(row.id)
      },
      disableWork() {
        axios.post('/safetytime', this.safeDisable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogDisable = false
          this.safeDisable.ids = []
          this.getReplaceList()
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .safe-containner{
    width: 100%;
    overflow: auto;
    padding: 20px;
    .outMore{
      height: 40px;
      padding-top: 2px;
      border-bottom: 1px solid #E1E1E1;
    }
    .dataTitle {
      padding-left: 5px;
      border-left: 5px solid #25B6C7;
      height: 16px;
      font-size: 16px;
      color: #323842;
    }
    .safeSearch{
      width: 100%;
      height: 50px;
    }
    /deep/ .gutter {
      background: rgb(216, 222, 232);
    }
    .safeTableList{
      width: 100%;
      height: 500px;
    }
    .footerPage{
      float: right;
      margin-top: 15px;
      position: relative;
    }
    .tableIcon {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #25B7C8;
    }
    .complete {
      border: 2px solid #52C8A1;
      color: #52C8A1;
      padding: 2px;
    }
    .segmentingLine {
      font-size: 20px;
    }
    .gutter {
      background: rgb(216, 222, 232);
    }
    /deep/ .delete {
      display: inline;
      margin-left: 10px;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-weight: 700;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-textarea__inner {
      resize: none;
    }
    /deep/ .el-dialog {
      border-radius: 5px;
    }
    /deep/ .el-dialog__header {
      background: #E3E6EE;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 20px 9px 20px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      line-height: 20px;
    }
    /deep/ .el-dialog__headerbtn {
      top: 15px;
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .el-table::before {
      height: 0px;
    }
    /deep/ .el-table .cell {
      white-space: pre-line;
    }
    /deep/ .relation {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #25B7C8;
    }
    /deep/ .el-textarea__inner {
      border: none;
    }
    /deep/ .el-form-item {
      margin-bottom: 10px;
    }
    /deep/ img {
      vertical-align: middle;
      margin-bottom: 3px;
    }
    /deep/ [class*=" el-icon-"], [class^=el-icon-] {
      font-weight: 700;
    }
    /deep/ .el-tree {
      background: #EAEDF1;
      padding: 10px;
    }
    /deep/ .el-dialog {
      width: 800px;
    }
    /deep/ .safeTimeTree {
      overflow: auto;
      height: 447px;
    }
    /deep/ .notes {
      float: left;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #69727E;
    }
    /deep/ .clears{
      padding: 6px 16px;
      background-color: #333B3D;
      border-color: #333B3D ;
      color: #fff;
      float: right;
      margin-left: 10px;
    }
    /deep/ .bottonConfirm {
      padding: 6px 16px;
      float: right;
      border:1px solid #25B6C7;
      background: #25B6C7;
    }
    /deep/ .leftInput > .el-input__inner {
      height: 30px;
      margin:10px 20px;
      width: 220px;
    }
    /deep/ .addSafeTable {
      height: 495px;
      overflow-y: auto;
    }
    /deep/ .addSafeTable > .el-table__header-wrapper{
      height: 0px;
    }
    /deep/ .addSafeTable > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > .el-table td, .el-table th{
      padding: 5px 0px;
    }
    /deep/ .el-icon-minus {
      color: #D05133;
    }
    /deep/ .block {
      height: 30px;
      line-height: 30px;
      float: right;
    }
    /deep/ .timeInterval {
      height: 30px;
      width: 365px;
      float: right;
    }
    /deep/ .enableDisableLeft {
      margin-left: 10px;
    }
    .addSafeSpan {
      float: left;
      margin: 6px 0px 0px 0px;
      color: #E53D41;
    }
    /deep/ .el-tag {
      background-color: transparent;
      border: none;
    }
    /deep/ .el-tag--success {
      background-color: transparent;
      color: #F99F62;
    }
    /deep/ .el-tag--primary {
      background-color: transparent;
      color: #000;
    }
    /deep/ .el-message-box__message p {
      text-indent: 160px!important;
    }
    /deep/ .el-message-box{
      width: 540px;
    }
    /deep/ .el-message-box__header{
      background-color: #E3E6EE;
      padding: 10px 15px;
    }
    /deep/ .el-message-box__title{
      font-size: 18px;
      font-weight: Bold;
      color: #323842;
    }
    /deep/ .el-message-box__status{
      right: 247px;
      top: 65px;
      font-size: 48px !important;
    }
    /deep/ .el-message-box__status.el-icon-warning{
      color: #E53D41;
    }
    /deep/ .el-message-box__content{
      height: 182px;
    }
    /deep/ .el-message-box__status + .el-message-box__message {
      padding-left: 20px;
      padding-right: 12px;
    }
    /deep/ .el-message-box__message p {
      margin: 0;
      font-size: 18px;
      color: #323842;
      padding-top: 96px;
      text-align: center;
    }
    /deep/ .el-message-box__headerbtn{
      top: 9px;
      font-size: 18px;
    }
    /deep/ .el-message-box__btns{
      padding: 10px 15px 7px ;
      border-top: 1px solid #e8eaf1;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-message-box{
      width: 540px;
    }
    /deep/ .el-message-box__header{
      background-color: #E3E6EE;
      padding: 10px 15px;
    }
    /deep/ .el-message-box__title{
      font-size: 18px;
      font-weight: Bold;
      color: #323842;
    }
    /deep/ .el-message-box__status{
      right: 247px;
      top: 65px;
      font-size: 48px !important;
    }
    /deep/ .el-message-box__status.el-icon-warning{
      color: #E53D41;
    }
    /deep/ .el-message-box__content{
      height: 182px;
    }
    /deep/ .el-message-box__status + .el-message-box__message {
      padding-left: 20px;
      padding-right: 12px;
    }
    /deep/ .el-message-box__message p {
      margin: 0;
      font-size: 18px;
      color: #323842;
      padding-top: 96px;
      text-align: center;
    }
    /deep/ .el-message-box__headerbtn{
      top: 9px;
      font-size: 18px;
    }
    /deep/ .el-message-box__btns{
      padding: 10px 15px 7px ;
      border-top: 1px solid #e8eaf1;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__body {
      text-align: center;
      font-size: 18px;
      height: 180px;
      border-bottom: 1px solid #e8eaf1;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer {
      height: 60px;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer > .dialog-footer > button {
      height: 30px;
      font-size: 14px;
      padding: 6px 16px;
    }
    /deep/ .outMost{
      width: 100%;
      height: 50px;
      background-color: #EFF3F6;
      padding-top: 5px;
      padding-left: 20px;
    }
    /deep/ label {
      font-weight: normal;
      color: #69727E;
    }
    /deep/ .handItem {
      margin-bottom: 5px!important;
    }
    /deep/ .indieWidth {
      padding: 6px 8px;
    }
    /deep/ .el-button + .el-button {
      margin-left: 5px;
    }
    /deep/ .el-button--primary {
      height: 30px;
      font-size: 14px;
      padding: 6px 16px;
      background: #25B6C7;
      border-color: #25B6C7;
    }
    /deep/ .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    /deep/ .dateInput {
      width: 385px;
    }
    /deep/ .handInput {
      width: 150px;
    }
    /deep/ .clear{
      padding: 6px 16px;
      background-color: #333B3D;
      border-color: #333B3D ;
      color: #fff;
    }
    /deep/ .el-dropdown-link {
      border: 2px solid;
      border-right: 0px;
      border-right: 4px solid;
      font-size: 10px;
      padding:2px;
      color: #52C8A1;
    }
    /deep/ .el-date-editor .el-range__icon {
      line-height: 25px;
    }
    /deep/ .el-date-editor .el-range-separator {
      line-height: 25px;
    }
  }
</style>
